<template>
	<div class="a">
		<el-row :gutter="20">
			<el-col
				:span="10"
				v-for="(item, index) in value"
				:key="index"
				class="zhuliao"
			>
				<el-row :gutter="5">
					<el-col :span="12">
						<el-input
							placeholder="请输入内容"
							v-model="item.name"
						></el-input>
					</el-col>
					<el-col :span="8">
						<el-input
							placeholder="请输入内容"
							v-model="item.specs"
						></el-input>
					</el-col>
					<el-col :span="4">
						<el-button
							@click="remove(index)"
							type="info"
							icon="el-icon-close"
							circle
							size="mini"
						></el-button>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-button type="info" @click="add">+添加一项</el-button>
	</div>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default: () => [],
		},
	},
	methods: {
		add() {
			// v-model 绑定的数据 在数组中双向绑定的 Value 发布事件用的是 input
			this.$emit('input', [...this.value, { name: '', specs: '' }]);
		},
		remove(e) {
			let arr = this.value.filter((item, index) => index != e);
			this.$emit('input', arr);
		},
	},
};
</script>
<style lang="sass" scoped>
.zhuliao
	margin-bottom: 20px
</style>